/*
    组件之间的通信 
    
    1. 父子 组件 
    <A>
        <B></B>
    </A>
    2. 兄弟组件 
    <A></A><B></B>

    props 传递数据
    state 修改数据 

    父组件如何修改子组件

    父组件把组件的state 当着子组件的props 传递给子组件
    父组件修改 state 会二次render 子组件接收到变化的 props  从而实现子组件修改  

    ref   this.refs  对象获取
    1. ref 作用于DOM 元素  指向这个真实的DOM元素
    2. ref 作用于组件  指向这个组件对象   
    ref={ele=>this.oh=ele}

    架构
    flux  redux mobx  event 


    受控的Input 组件
    受控的组件  input 绑定动态的 value  value 受state 状态控制的  只有state改变 input才能改变
    非受控的组件  value 没有绑定状态 


*/ 
import {MyBtn} from "./MyBtn"


export class State2 extends Component{

  state = {
    text:"Are you OK???",
    show:true,
    count:2107
  }

  changeText=(e)=>{
    this.setState({
      text:e.target.value
    })
    console.log(this.refs)
    this.refs.oh.style.color="red"
    this.one.style.fontSize = "40px"
  }

  changeSome=()=>{
    this.setState({
      text:this.input.value 
    })
  }
  changeShow=()=>{
    this.setState({
      show:!this.state.show 
    })
  }

  changeCount=()=>{
    this.setState({
      count:++this.state.count
    })
  }
  changeChildByRef=()=>{
    this.child.setState({
      hool:"每天熬夜到晚上2点了"
    })
  }
  render(){
    const {
      text,
      show,
      count
    } = this.state 
    return (
      <div>
        <h2 ref="oh" > 父子组件通信  ---> 父改子  (state==>props) </h2>
        <h2>count == {count}</h2>
        <MyBtn onClick={this.changeCount} text={'countAdd'}></MyBtn>
        <p ref={el=>this.one=el} >text == {text}</p>
        <p>
          <input type="text" placeholder="受控组件" value={text} onChange={this.changeText}/>
        </p>
        <p>
        <input type="text" placeholder="非受控组件"  ref={el=>this.input=el} onChange={this.changeSome }/>
        </p>
        <MyBtn onClick={this.changeShow} text={show?'点击隐藏':'点击显示'}></MyBtn>
        <MyBtn onClick={this.changeChildByRef} text={'ref 实现父改子 '}></MyBtn>
        <hr/>
        <ChildOne
          mytext={text}
          show={show}
          count={count}
          ref={el=>this.child=el}
        ></ChildOne>
      </div>
    )
  }
}

State2.names = "wh2107"

class ChildOne extends Component{
  state = {
     hool:"认真学react,努力背面试题"
  }
  render(){
    const {mytext,show,count} = this.props 
    return (
      <div>
        <h2> ChildOne - ChildOne - 子组件 </h2>
        <h3>count == {count}</h3>
        <p>mytext == {mytext}</p>
        <h4>hool == {this.state.hool}</h4>
        <div
        style={{width:200,height:200,background:'darkred',borderRedius:10,display:show?'block':'none'}}
        >
          我是被父组件的show 控制的 
        </div>
      </div>
    )
  }
}

